<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
  <div class="main-header">
    <div class="left-content">
      <h2 class="main-title">系统状态概览</h2>
      <p class="introduce">实时监控App的响应性能和稳定性</p>
    </div>
    <div class="right-buttons">
      <el-button class="refresh">
        <el-icon><Refresh /></el-icon>
          刷新
      </el-button>
      <el-button class="export">
        <el-icon><Document /></el-icon>
          导出报告
      </el-button>
    </div>

  </div>

    <div class="card-container">
      <div class="stat-card" v-for="(card, index) in cards" :key="index">
        <div class="card-title">{{ card.title }}</div>

        <div class="card-value">
          {{ card.value }}
          <span class="card-unit">{{ card.unit }}</span>
        </div>

        <div class="card-trend" :class="{
        'trend-up': card.trend?.direction === 'up',
        'trend-down': card.trend?.direction === 'down'
      }">
          <span v-if="card.trend" class="trend-icon">
          {{ card.trend.direction === 'up' ? '↑' : '↓' }}
          </span>

          <span v-if="card.trend">
          {{ card.trend.percent }}% {{ card.trend.text }}
          </span>

          <span v-else class="card-extra">{{ card.extra }}</span>

       </div>

        <div class="card-icon" :style="{ backgroundColor: card.iconBg  }">
           <el-icon :size="24"><component :is="card.icon" /></el-icon>
        </div>

      </div>
  </div>

    <!-- ECharts 响应时间趋势图表 -->
    <div class="time-trend">
      <div class="chart-header">
        <div class="chart-title">
          <h3>响应时间趋势</h3>
          <p>过去7天系统响应性能变化</p>
        </div>
        <div class="chart-controls">
          <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
            <el-radio-button label="今日">今日</el-radio-button>
            <el-radio-button label="本周">本周</el-radio-button>
            <el-radio-button label="本月">本月</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="chart-wrapper">
        <v-chart class="chart" :option="chartOption" :autoresize="true" />
      </div>
    </div>
  </div>

</template>

<script setup >
import { Refresh, Document, Clock, TrendCharts,CircleCheckFilled ,Grid } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
])

// 时间范围
const timeRange = ref('本周')


const cards = ref([
      {
        title: "平均响应时间",
        value: "238",
        unit: "ms",
        trend: { percent: "12", direction: "down", text: "较昨日" },
        icon: Clock,
        iconBg: "rgba(173,216,230,0.71)" , // 图标背景色
      },
      {
        title: "峰值响应时间",
        value: "542",
        unit: "ms",
        trend: { percent: "5", direction: "up", text: "较昨日" },
        icon: TrendCharts,
        iconBg: "rgba(255,228,181,0.71)",
      },
      {
        title: "接口成功率",
        value: "99.8",
        unit: "%",
        trend: { percent: "0.2", direction: "up", text: "较昨日" },
        icon: CircleCheckFilled ,
        iconBg: "rgba(144,238,144,0.71)",
      },
      {
        title: "系统状态",
        value: "良好",
        extra: "上次检查: 1分钟前",
        icon: Grid,
        iconBg: "rgba(221,160,221,0.71)",
      }
    ])


// 模拟数据
const generateChartData = (range) => {
  const baseData = {
    '今日': {
      days: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59'],
      average: [180, 220, 280, 320, 290, 240, 200],
      peak: [320, 380, 450, 520, 480, 400, 350]
    },
    '本周': {
      days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      average: [238, 195, 320, 280, 180, 150, 165],
      peak: [420, 380, 542, 460, 350, 280, 310]
    },
    '本月': {
      days: ['第1周', '第2周', '第3周', '第4周'],
      average: [250, 220, 190, 210],
      peak: [450, 400, 350, 380]
    }
  }

  return baseData[range] || baseData['本周']
}

// 图表配置 - 折线图版本
const chartOption = ref({})

const initChart = () => {
  const data = generateChartData(timeRange.value)

  chartOption.value = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['平均响应时间 (ms)', '峰值响应时间 (ms)'],
      right: 10,
      top: 10,
      textStyle: {
        color: '#666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.days,
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      name: 'ms',
      min: 0,
      max: 600,
      interval: 100,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ddd'
        }
      },
      axisLabel: {
        color: '#666',
        formatter: '{value} ms'
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      }
    },
    series: [
      {
        name: '平均响应时间 (ms)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        data: data.average,
        lineStyle: {
          width: 3,
          color: '#5B9EFF'
        },
        itemStyle: {
          color: '#5B9EFF',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(91, 158, 255, 0.3)'
            }, {
              offset: 1, color: 'rgba(91, 158, 255, 0.1)'
            }]
          }
        }
      },
      {
        name: '峰值响应时间 (ms)',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        data: data.peak,
        lineStyle: {
          width: 3,
          color: '#FF6B6B'
        },
        itemStyle: {
          color: '#FF6B6B',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 107, 107, 0.3)'
            }, {
              offset: 1, color: 'rgba(255, 107, 107, 0.1)'
            }]
          }
        }
      }
    ]
  }
}

// 时间范围切换
const handleTimeRangeChange = () => {
  initChart()
}

// 初始化
onMounted(() => {
  initChart()
})
</script>

<style>
.app-container {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: 100vh;
}

.main-header {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
}

.right-buttons {
  display: flex;
  align-items: center;
}

.refresh {
  margin-right: 16px;
}

.export {
  margin-right: 16px;
  background-color:#5B9EFF;
  color: #ffffff;
}


.main-title {
  font-size: 28px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.introduce {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* 确保卡片容器的间距设置匹配 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片之间的间距为20px */
  padding: 20px;
}

.stat-card {
  width: calc(25% - 15px); /*四张卡片在一起，间距为15px */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.2s ease; /* 动画过渡效果，使缩放更平滑 */
}

/* 点击时的跳动效果 */
.stat-card:active {
  transform: scale(0.95); /* 点击时缩小到95%，产生按压感 */
}

/* 添加悬停效果增强交互体验 */
.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 悬停时阴影加深 */
  transform: translateY(-2px); /* 轻微上浮 */
}


.card-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.card-unit {
  font-size: 14px;
  font-weight: normal;
  margin-left: 4px;
}

.card-trend {
  font-size: 12px;
  color: #606266;
  margin-top: 4px;
}

.card-icon{
  align-self: flex-end;
  margin-top: -8px;
  /* 添加以下样式来控制背景大小 */
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 圆形背景 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.trend-up {
  color: #67c23a; /* 上升趋势用绿色 */
}

.trend-down {
  color: #f56c6c; /* 下降趋势用红色 */
}

.trend-icon {
  margin-right: 2px;
}

.card-extra {
  color: #909399;
}

.card-icon {
  align-self: flex-end; /* 图标靠右上角 */
  margin-top: -8px; /* 微调位置，与卡片顶部对齐 */
}
/* 图表样式 */
.time-trend {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.chart-title h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.chart-title p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.chart-wrapper {
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    gap: 16px;
  }

  .chart-wrapper {
    height: 300px;
  }
}
</style>